<div class="todo-list-item" fxLayout="row" fxLayoutAlign="start center" [ngClass]="{'completed': todo.completed}"
  matRipple>
  <mat-icon class="handle m-r-16" cdkDragHandle>drag_handle</mat-icon>
  <mat-checkbox class="m-r-16" fxFlex="0 1 auto" (click)="toggle(todo)"></mat-checkbox>

  <div class="item" fxLayout="row" fxLayoutAlign="start center" fxFlex>
    <div [ngClass]="{'completed':todo.completed}" fxLayout="column" fxFlex>
      <div class="title">{{ todo.title }}</div>
      <div class="notes">{{ todo?.notes }}</div>
      <div class="tags" fxLayout="row wrap" fxLayoutAlign="start center">
        <div class="tag" fxLayout="row" fxLayoutAlign="start center">
          <div class="tag-color" style="background-color: rgb(56, 142, 60);"></div>
          <div class="tag-label">前端</div>
        </div>
      </div>
    </div>
  </div>

  <div class="actions" fxLayout="row" fxLayoutAlign="star center">
    <button mat-icon-button class="btn-icon">
      <mat-icon>error</mat-icon>
    </button>
    <button mat-icon-button class="btn-icon">
      <mat-icon>star</mat-icon>
    </button>
    <button mat-icon-button class="btn-icon">
      <mat-icon>more_vert</mat-icon>
    </button>
  </div>

</div>